<template>
    <div class="content">
        <div :style="contentStyle"></div>
        <div class="point" :style="pointStyle">
            <div class="point-article"
                 v-for="(point,index) in question.articles" :key="index"
                 :style="pointArticleStyle(index)">
                <img  class="point-article-img" :src=point.imageUrl alt="">
                <div  class="point-home">
                    <img :src="point.codeImage" alt="">
                </div>
            </div>
        </div>
        <div class="article-content" v-show="isPoint">
            <div class="optionMain">
                <div class="option-home-image"
                     v-for="(optionArticle,cIndex) in articleOption" :key="cIndex + 10"
                     :style="optionArticleStyle(optionArticle,cIndex)"
                     @touchstart.stop="start(optionArticle,cIndex,$event)"
                     @touchmove.stop="move(optionArticle,cIndex,$event)"
                     @touchend.stop="end(optionArticle,cIndex,$event)">
                    <img :src="optionArticle.imageUrl" alt="">
                </div>
            </div>
            <div class="article-bottom" :style="articleBottomStyle" >
                <div class="article-option"
                     :class="option.isFalse?'los':''"
                     v-for="(option,index) in question.articles" :key="index"
                     :style="optionStyle(option,index)"
                     :ref="'option' + index">
                    <img :src="option.codeImage" alt="">
                </div>
            </div>
        </div>
<!--        <Point v-if="isPointShow" :style="pointMoveStyle" class="fadeIn"/>-->
    </div>
</template>

<script>
    import { mixins } from "@/common/mixins/assignmentMixins.js"
    import {mapActions} from "vuex";
    // import Point from "../point.vue"
    // eslint-disable-next-line no-unused-vars
    const $ = window.$
    export default {
        mixins: [mixins],
        data(){
            return{
                isMove: false,
                isPoint: false,
                isFinished: false,
                touchCount: 0,
                current: 0,
                codeAndMap:{
                    A: this.variable.STATICE_URLTITLE + 'assignment/image/page13/红房子-大.png',
                    B: this.variable.STATICE_URLTITLE + 'assignment/image/page13/白房子-大.png',
                    C: this.variable.STATICE_URLTITLE + 'assignment/image/page13/蓝房子-大.png',
                    D: this.variable.STATICE_URLTITLE + 'assignment/image/page13/黄房子-大.png'
                },
                articleOption: [],
                isPointShow: false,  //手势显示
                isPointMove: false
            }
        },
        beforeMount() {
            if(this.question.isFinish){
                this.isPoint = false
                this.isFinished = true
                return
            } else {
                if(this.index === this.activeIndex) this.onEnter()
            }
        },
        created() {
            Object.keys(this.codeAndMap).forEach(codeName=>{
                this.question.articles.map(item=>{
                    if(codeName === item.code) this.$set(item,'codeImage',this.codeAndMap[codeName])
                })
            })
            this.question.optionArticleNames.forEach(articleName=>{
                this.question.articles.map(item=>{
                    if(articleName === item.name) this.articleOption.push(JSON.parse(JSON.stringify(item)))
                })
            })
        },
        // components:{
        //     Point
        // },
        computed:{
            question() {
                return this.item
            },
            //提示手指样式
            pointMoveStyle(){
                let aIndex = 0
                this.item.articles.forEach((item,index) =>{
                    if(item.name === this.articleOption[0].name) aIndex = index
                })
                const ref = 'option' + aIndex,
                    Left = this.$refs[ref][0].getBoundingClientRect().left,
                    Top = this.$refs[ref][0].getBoundingClientRect().top,
                    X = this.$refs[ref][0].offsetWidth,
                    Y = this.$refs[ref][0].offsetHeight
                return{
                    left: this.isPointMove ? (Left + X) +'px' : '50%',
                    top: this.isPointMove ? (Top + Y) + 'px' : '50%',
                    marginLeft: this.isPointMove ? '0' : '-1rem',
                    marginTop: '0rem',
                    // transform: this.isPointMove ? "translate3d(-11rem,7rem,0)" : '',
                    transition: 'all 1s'
                }
            },
            //背景图片样式
            contentStyle(){
                return {
                    height: '100%',
                    width: '100%',
                    background: "url(" + this.question.background + ")0 0/100% 100%",
                    filter: this.isFinished? '' : 'grayscale(1) contrast(40%)',
                    transition: "all 1s",
                }
            },
            pointStyle(){
                const width = this.question.articles.length * 8
                return {
                    width: width + 'rem',
                    marginLeft: -(width / 2) + 'rem',
                    transform: this.isPoint? 'scale(0.5) translate(0rem, -15.5rem)' : this.isFinished ? 'scale(1) translate(0rem, 0rem)' : '',
                    transition: 'all 2s'
                }
            },
            //    提示页的样式
            pointArticleStyle(index){
                return function (index) {
                    return {
                        left: 4 + index * 8 + 'rem'
                    }
                }
            },
            //  底部样式
            articleBottomStyle(){
                return {
                    width: this.question.articles.length * 7 + 'rem'
                }
            },
            //    样式选择
            optionStyle(option,index){
                return function (option,index) {
                    return {
                        left: 1 + index * 7 + 'rem',
                        transition: 'all 1s',
                        filter: option.isBright ? 'drop-shadow(0px 0px 0.5rem rgb(254, 172, 81))' : '',
                        transform: option.isHighLigh? 'scale(1.5)' : ''
                    }
                }
            },
            optionArticleStyle(optionArticle,cIndex){
                return function (optionArticle,cIndex) {
                    const subIndex = cIndex - this.current
                    return {
                        left: 3.5 + subIndex * 7  + 'rem',
                        opacity: subIndex === 0 ? 1 : 0.5,
                        transition: optionArticle.transition,
                        transform: "translate3d(" + optionArticle.moveX + "px," + optionArticle.moveY + "px,0)",
                        zIndex: optionArticle.zIndex,
                        display: optionArticle.isFinish? 'none' : 'block'
                    }
                }
            },
        },
        methods: {
            onEnter:function () {
                clearTimeout(this.showHintImageTimeOut)
                this.showHintImageTimeOut = setTimeout(()=>{ this.isPoint = true },6000);
                setTimeout(()=>{this.isPointShow = true},7000)
                setTimeout(()=>{this.isPointMove = true},9000)
            },
            start: function (optionArticle, cIndex, event) {
                if (this.question.isFinish || optionArticle.isLos || optionArticle.isFinish) {
                    return
                }
                this.updateOperated({questionIndex:this.questionIndex,param:this.index})
                this.isPointShow = false
                if(cIndex === this.current){
                    this.$set(optionArticle, 'x', event.changedTouches[0].clientX)
                    this.$set(optionArticle, 'y', event.changedTouches[0].clientY)
                    this.$set(optionArticle,'transition','all 0s')
                    this.$set(optionArticle, 'zIndex',99)
                }
            },
            move: function (optionArticle, cIndex, event) {
                if(cIndex === this.current){
                    this.$set(optionArticle, 'moveX',event.changedTouches[0].clientX - optionArticle.x)
                    this.$set(optionArticle, 'moveY',event.changedTouches[0].clientY - optionArticle.y)
                    const x = event.changedTouches[0].clientX,
                        y = event.changedTouches[0].clientY
                    //循环房子 符合则成功
                    for (let i = 0, len = this.question.articles.length; i < len; i++) {
                        const ref = 'option' + i,
                            minX = this.$refs[ref][0].getBoundingClientRect().left,
                            minY = this.$refs[ref][0].getBoundingClientRect().top,
                            maxX = minX + this.$refs[ref][0].offsetWidth,
                            maxY = minY + this.$refs[ref][0].offsetHeight,
                            picture = this.question.articles[i],
                            isCoord = x >= minX && x <= maxX && y >= minY && y <= maxY
                        if (isCoord) {
                            this.$set(picture, 'isHighLigh', true)
                        } else {
                            this.$set(picture, 'isHighLigh', false)
                        }
                    }
                }
            },
            end: function (optionArticle, cIndex, event) {
                if(cIndex === this.current){
                    this.$set(optionArticle, 'moveX',0)
                    this.$set(optionArticle, 'moveY',0)
                    this.$set(optionArticle, 'zIndex',98)
                    this.articleOption.forEach(item=>{
                        this.$set(item, 'transition','all 0.5s')
                    })
                    setTimeout(()=>{
                        this.question.articles.map(item=>{
                            if(item.isHighLigh) this.$set(item,'isHighLigh',false)
                        })
                    },0)
                    const x = event.changedTouches[0].clientX,
                        y = event.changedTouches[0].clientY
                    //循环房子 符合则成功
                    for (let i = 0, len = this.question.articles.length; i < len; i++) {
                        const ref = 'option' + i,
                            minX = this.$refs[ref][0].getBoundingClientRect().left,
                            minY = this.$refs[ref][0].getBoundingClientRect().top,
                            maxX = minX + this.$refs[ref][0].offsetWidth,
                            maxY = minY + this.$refs[ref][0].offsetHeight,
                            picture = this.question.articles[i],
                            isCoord = x >= minX && x <= maxX && y >= minY && y <= maxY,
                            isTypeName = picture.name === optionArticle.name
                        if (isCoord) {
                            this.$set(picture, 'isHighLigh', false)
                            if(isTypeName){
                                this.$set(picture, 'isBright', true)
                                this.sucMusic()
                                this.current++
                                this.touchCount = 0
                                setTimeout(()=>{ this.$set(picture, 'isBright', false) },1000)
                                this.$set(optionArticle,'isFinish',true)
                                if(this.current === this.articleOption.length){
                                    this.isFinished = true
                                    this.isPoint = false
                                    if(this.isSeedEntery){
                                        this.setSucLottiePlay()
                                    }else {
                                        this.perfectMusic()
                                    }
                                    setTimeout(()=>{
                                        this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                                    },3000)
                                    this.addAnswer({
                                        id: this.item.id,
                                        type: true
                                    })
                                }
                            } else {
                                this.touchCount++
                                this.losMusic()
                                if(this.isSeedEntery){
                                    setTimeout(()=>{this.$emit('nextAssignment')},600)
                                } else {
                                    this.$emit("losShow")
                                }
                                this.$set(optionArticle, "isLos", true)
                                this.addAnswer({
                                    id: this.item.id,
                                    type: false
                                })
                                this.$set(picture,'isFalse',true)
                                setTimeout(() => {
                                    this.$set(optionArticle, "isLos", false)
                                    this.$set(picture,'isFalse',false)
                                }, 1000)
                                if(this.touchCount === 3){
                                    this.setQuestionAudio()
                                }
                            }
                        }
                    }
                }
            },
            ...mapActions("mainStatus", ["setLoading"])
        },
        watch: {
            activeIndex: function (activeIndex) {
                if (this.index === activeIndex && !this.question.isFinish) {
                    this.onEnter()
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import '../../../common/stylus/content.styl'
    .point
        position absolute
        $center('WHLT', 32rem, 8rem)
        top 45%
        .point-article
            position absolute
            $center('WHLT', 7rem, 8rem)
            line-height 8rem
        .point-article-img
            max-width 100%
            max-height 100%
            vertical-align middle
            filter drop-shadow(2.5px 0px #fff) drop-shadow(-2.5px 0px #fff) drop-shadow(0px -2.5px #fff) drop-shadow(0px 2.5px #fff)
        .point-home
            position absolute
            $center('WHLT', 2rem, 2rem)
            margin-top 4.5rem
            line-height 2rem
        .point-home img
            max-width 100%
            max-height 100%
            vertical-align middle
    .article-content
        opacity 0
        animation loading-in 1s ease-in-out 0.5s
        animation-fill-mode forwards
        .article-bottom
            position absolute
            $center('WHLT',30rem, 6rem)
            top 65%
            margin-top 0
            .article-option
                position absolute
                $center('WHLT', 5rem, 5rem)
                margin-left 0
                line-height 5rem
            .article-option img
                width 100%
                max-height 100%
                vertical-align middle
        .optionMain
            position absolute
            $center('WHLT', 7rem, 7rem)
            background url($urlTitle + "assignment/image/page13/角色选择背景.png") 0 0/100% 100%
            .option-home-image
                position absolute
                $center('WHLT', 5rem, 5rem)
                line-height 5rem
            .option-home-image img
                max-width 100%
                max-height 100%
                vertical-align middle
</style>
